<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>用户报表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript" src="../js/ux/data/PagingMemoryProxy.js"></script>
<script type="text/javascript" src="../js/ux/form/SearchField.js"></script>
<script type="text/javascript" src="../js/ux/ProgressBarPager.js"></script>
<script type="text/javascript" src="../js/ux/RowExpander.js"></script>
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="../js/i18n.js"></script>
<script type="text/javascript" src="../js/head.js"></script>


    <style type="text/css">
        body .x-panel {
            margin:0 0 0 0;
			padding:0 0 0 0;
        }
		        /* style rows on mouseover */
        .x-grid-row-over .x-grid-cell-inner {
            font-weight: bold;
        }
		        .x-ie6 .x-action-col-cell img {
            position:relative;
            top:-1px;
        }

    </style>

<script type="text/javascript">


Ext.Loader.setConfig({
    enabled: true
});

Ext.require([
    'Ext.data.*',
    'Ext.panel.Panel',
    'Ext.view.View',
    'Ext.layout.container.Fit',
    'Ext.toolbar.Paging',
    'Ext.ux.form.SearchField',
	'Ext.ux.RowExpander',
    'Ext.selection.CheckboxModel',
	'Ext.ux.data.PagingMemoryProxy',
    'Ext.ux.ProgressBarPager'
]);


Ext.onReady(function() {
	var vmid=0;
    var params;
    MultiLang = (function() {
        return {
            init: function() {
                // load ExtJS locale
                params = getCookie("lang");
                i18n.set({
  				  lang: params, 
  				  path: '../resources'
  				});
                if (params) {
                    var url = Ext.util.Format.format('../extjs-4.1.0/locale/ext-lang-{0}.js', params);
                    Ext.Ajax.request({
                        url: url,
                        success: this.onLoadExtLocaleSuccess,
                        failure: this.onLoadExtLocaleFailure,
                        scope: this
                    });
                } else {
                    // no language found, locale of ExtJS will be english as default
                    //this.loadmyprojectLocale();
                	this.setup();
                }
            },
            onLoadExtLocaleSuccess: function(response) {
                try {
                    eval(response.responseText);
                } catch (e) {
                    Ext.Msg.alert('Failure', e.toString());
                }
                //this.loadmyprojectLocale();
                this.setup();
            },
            onLoadExtLocaleFailure: function() {
                Ext.Msg.alert('Failure', 'Failed to load locale file.');
                this.setup();
                //this.loadmyprojectLocale();
            },
            setup: function() {

var nodeStore=Ext.create('Ext.data.Store', {
    fields:['id','index','num'],
    storeId:'nodeStore',
    pageSize:10,
	width:'100%',
    sorters: [
              {
                  property : 'id',
                  direction: 'DESC'
              }
          ],
	remoteSort:true,
	proxy: {
        type: 'ajax',
        url : path+'/user_report/userReport!getUserReportByYear.action',
		reader: {
            type: 'json',
			root:'resultObject',
			totalProperty: 'resultObject.totalCount'
        }
    },
	autoLoad:true
});

nodeStore.load({
   scope:this,
   callback: function(records, operation, success) {
      var num=0;
	  for(var i = 0 ;i<records.length;i++){
	      num+=records[i].get('num');
	  }
	  Ext.getCmp('numTotal').setValue(num);
   }
})


var chartStore = Ext.create('Ext.data.JsonStore', {
        fields: ['index', 'num'],
        storeId:'chartStore',
        pageSize:10,
	    width:'100%',
	    remoteSort:true,
     	proxy: {
                type: 'ajax',
                url : path+'/user_report/userReport!getUserReportByYear.action',
		        reader: {
                          type: 'json',
			              root:'resultObject',
			              totalProperty: 'resultObject.totalCount'
               }
         },
		 autoLoad:true
    });

var querychart = Ext.create('Ext.chart.Chart', {
            id:'querychart',
            xtype: 'chart',
            animate: true,
            shadow: true,
			flex:1.6,
            store: chartStore,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['num'],
                title: i18n._('user1'),
                grid: true,
                minimum: 0,
                maximum: 2000
            }, {
                type: 'category',
                position: 'bottom',
                fields: ['index'],
                //title: 'Months',
                label: {
                    rotate: {
                        degrees: 0
                    },
					renderer: function(v) {
					  if(querycombox.getValue()=='按年'){
					     v = Ext.Date.format(Ext.Date.parse(v,'Y/m/d'),'Y');
					  }else if(querycombox.getValue()=='按月'){
					     v = Ext.Date.format(Ext.Date.parse(v,'Y/m/d'),'Ym');
					  }else{
					     v = Ext.Date.format(Ext.Date.parse(v,'Y/m/d'),'Ymd');
					  }
					  return v; 
					}
                }
            }],
            series: [{
                type: 'column',
                axis: 'left',
                gutter: 80,
                xField: 'index',
                yField: ['num'],
                tips: {
                    trackMouse: true,
                    width: 80,
                    height: 38,
                    renderer: function(storeItem, item) {
					  if(querycombox.getValue()=='按年'){
					    this.setTitle(  Ext.Date.format(Ext.Date.parse(storeItem.get('index'),'Y/m/d'),'Y'));
					  }else if(querycombox.getValue()=='按月'){
						this.setTitle(  Ext.Date.format(Ext.Date.parse(storeItem.get('index'),'Y/m/d'),'Y/m/'));
					  }else{
					    this.setTitle(  Ext.Date.format(Ext.Date.parse(storeItem.get('index'),'Y/m/d'),'Y/m/d'));
					  }
                        this.update(storeItem.get('num'));
                    }
                },
                style: {
                    fill: '#38B8BF'
                }
            }],
			style:{
			  marginLeft:'20px'
			}
        });

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
 var pluginExpanded = true;
 var grid=Ext.create('Ext.grid.Panel', {
    flex:.4,
    store: Ext.data.StoreManager.lookup('nodeStore'),
	simpleSelect:true,
	selModel: Ext.create('Ext.selection.RowModel'),
    columns: [
		{header: i18n._('year'), dataIndex:'index',xtype:'datecolumn',format:'Y',flex:1},//
		{header: i18n._('user'), dataIndex:'num',flex:1}
	],
    selType: 'cellmodel',
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize'
        }
    },
	bbar:[{xtype:'tbfill'},
	{
	    id:'numTotal',
	    xtype: 'displayfield',
        fieldLabel: i18n._('total'),
        name: 'total',
		style:{
		  marginRight:'20px'
		},
		labelAlign:'right'
	}
	]
	})

			var option = Ext.create('Ext.data.Store', {
                                    fields: ['abbr', 'name'],
                                    data : [
                                            {"abbr":i18n._('ByYear'), "name":"按年"},
                                            {"abbr":i18n._('ByMonth'), "name":"按月"},
                                            {"abbr":i18n._('ByDay'), "name":"按日"}
                                    ]
                            });
                  
				  
				  var querycombox = Ext.create('Ext.form.ComboBox', {
				    id: 'sort',		
					editable:false,
                    fieldLabel: i18n._('Inquires the particle size'),
                    store: option,
	                width: 250,
                    queryMode: 'local',
                    displayField: 'abbr',
                    valueField: 'name',
					labelAlign:'right',
                    renderTo: Ext.getBody(),
					value:'按年',
					listeners:{
					  'change':{
					     fn:function(field,newValue,oldValue,objtps){
						     if(newValue=='按年'){
							    beginDate.format = 'Y';
								endDate.format = 'Y';
                                beginDate.setFieldLabel(i18n._('starts')+i18n._('years'));
								endDate.setFieldLabel(i18n._('ends')+i18n._('years'));
                                Ext.getCmp('beginDate').setValue(null);
                                Ext.getCmp('endDate').setValue(null);
							 }else if(newValue=='按月'){
                                beginDate.format = 'Ym';
								endDate.format = 'Ym';
                                beginDate.setFieldLabel(i18n._('starts')+i18n._('months'));
								endDate.setFieldLabel(i18n._('ends')+i18n._('months'));
                                Ext.getCmp('beginDate').setValue(null);
                                Ext.getCmp('endDate').setValue(null);
							 }else{
                                beginDate.format = 'Ymd';
                                endDate.format = 'Ymd';
							    beginDate.setFieldLabel(i18n._('starts')+i18n._('dates'));
								endDate.setFieldLabel(i18n._('ends')+i18n._('dates'));
                                Ext.getCmp('beginDate').setValue(null);
                                Ext.getCmp('endDate').setValue(null);
							 }
						 }
					  }
					}
                  }); 

				  var beginDate=Ext.create('Ext.form.field.Date',{
					       //fieldLabel: i18n._('beginDate'),
                           fieldLabel:i18n._('starts')+i18n._('years'),
                           id:'beginDate',
						   labelAlign:'right',
						   style:{
						     marginTop:'5px'
						   },
						   editable:false, 
						   format:'Y',
						   width:Ext.getCmp('sort').getWidth(),
	                       maxValue: new Date()
	                       });

                  var endDate=Ext.create('Ext.form.field.Date',{
					       //fieldLabel: i18n._('beginDate'),
                           fieldLabel:i18n._('ends')+i18n._('years'),
                           id:'endDate',
						   labelAlign:'right',
						   style:{
						     marginTop:'5px'
						   },
						   editable:false,
						   format:'Y',
						   width:Ext.getCmp('sort').getWidth(),
	                       maxValue: new Date()
	                       });

				  
    Ext.create('Ext.Viewport', {
	       layout:'fit',
	       border:false,
           items:[{
            xtype:'panel',
			id:'pane_one',
			title: i18n._('user report title'),
			///title: i18n._('Report')+'&nbsp;&nbsp;>>&nbsp;&nbsp;'+i18n._('UserReport'),
			width:'100%',
			bodyBorder:false,
			//layout:'fit',
		  layout:'anchor',
		  items:[
		     {
			    anchor:'100% 15%',
				xtype:'fieldset',
				border:false,
				//title:'条件',
				style:{
				  marginLeft:'5px',
				  marginRight:'5px',
				  marginBottom:'5px'
				},
				layout:{
				  type:'hbox',
				  padding:'5',
				  align:'middle'
				},
				items:[querycombox,beginDate,endDate,
				{
							 xtype: 'button',
							 margin:'0 0 0 10',
							 icon:'../images/zoom.png',
							 handler: function(){
								 var date = Ext.getCmp('endDate').getValue()+'';
								 var year =date.substr(11,4);

								 
								 if(Ext.getCmp('endDate').getValue()==null||Ext.getCmp('beginDate').getValue()==null){
									 Ext.MessageBox.show({
										   title:i18n._('notice'),
										   msg:  i18n._('time_cant_null'),
										   icon:Ext.MessageBox.WARNING,
										   buttons: Ext.MessageBox.OK
										   
									   }); 
										return;
								 };
								 if(Ext.getCmp('endDate').getValue() - Ext.getCmp('beginDate').getValue()<0){
										Ext.MessageBox.show({
											   title:i18n._('notice'),
											   msg: i18n._('time_error'),
											   icon:Ext.MessageBox.WARNING,
											   buttons: Ext.MessageBox.OK
											   
										   }); 
											return;
								 };
								 if(year <2011){
									 Ext.MessageBox.show({
										   title:i18n._('notice'),
										   msg: i18n._('after2011'),
										   icon:Ext.MessageBox.WARNING,
										   buttons: Ext.MessageBox.OK
										   
									   }); 
										return;
								 };
                                 if (querycombox.getValue() == '按月') {
                                     if ((Ext.getCmp('endDate').getValue() - Ext.getCmp('beginDate').getValue()) / 2592000000 > 12) {
                                    	 Ext.MessageBox.show({
  										   title:i18n._('notice'),
  										   msg: i18n._('monthInYear'),
  										   icon:Ext.MessageBox.WARNING,
  										   buttons: Ext.MessageBox.OK
  										   
  									   }); 
                                     } else {
                                         Ext.Ajax.request({
                                                     url:path + '/user_report/userReport!getUserReportByMonth.action?beginDate=' + Ext.getCmp('beginDate').getValue() + "&endDate=" + Ext.getCmp('endDate').getValue(),
                                                     success:function(response, selfobj) {
                                                         var a = response.responseText;
                                                         var json = new Ext.JSON.decode(a);
                                                         var fields = ['index','num'];
                                                         var column = '{"columModle":[{"text":i18n._("months"),"dataIndex":"index",xtype:"datecolumn","format":"Ym","flex":1},' +
                                                                 '{"text":i18n._("user"),"dataIndex":"num","flex":1}]}';
                                                         var columns = new Ext.JSON.decode(column);
                                                         var store = Ext.create('Ext.data.Store', {
                                                                     fields:fields,
                                                                     pageSize:10,
                                                                     width:'100%',
                                                                     sorters: [
                                                                         {
                                                                             property : 'id',
                                                                             direction: 'DESC'
                                                                         }
                                                                     ],
                                                                     remoteSort:true,
                                                                     proxy: {
                                                                         type: 'ajax',
                                                                         url : path + '/user_report/userReport!getUserReportByMonth.action',
                                                                         extraParams:{beginDate:Ext.getCmp('beginDate').getValue(), endDate:Ext.getCmp('endDate').getValue()},
                                                                         reader: {
                                                                             type: 'json',
                                                                             root:'resultObject',
                                                                             totalProperty: 'resultObject.totalCount'
                                                                         }
                                                                     }
                                                                 });
                                                         store.load({
                                                                     scope:this,
                                                                     callback: function(records, operation, success) {
                                                                         var num = 0;
                                                                         for (var i = 0; i < records.length; i++) {
                                                                             num += records[i].get('num');
                                                                         }
                                                                         Ext.getCmp('numTotal').setValue(num);
                                                                         chartStore.loadData(store.getRange(0, store.getCount() - 1));
                                                                     }
                                                                 })
                                                         grid.reconfigure(store, columns.columModle);
                                                         grid.update();
                                                     }
                                                 })
                                     }
                                 }else if(querycombox.getValue()=='按日') {
                                     if ((Ext.getCmp('endDate').getValue() - Ext.getCmp('beginDate').getValue()) / 86400000 > 31) {
                                         alert("所选的日期区间应该在一个月内");
                                     } else {
                                         Ext.Ajax.request({
                                                     url:path + '/user_report/userReport!getUserReportByDay.action?beginDate=' + Ext.getCmp('beginDate').getValue() + "&endDate=" + Ext.getCmp('endDate').getValue(),
                                                     success:function(response, selfobj) {
                                                         var a = response.responseText;
                                                         var json = new Ext.JSON.decode(a);
                                                         var fields = ['index','num'];
                                                         var column = '{"columModle":[{"text":i18n._("days"),"dataIndex":"index",xtype:"datecolumn","format":"Ymd","flex":1},' +
                                                                 '{"text":i18n._("user"),"dataIndex":"num","flex":1}]}';
                                                         var columns = new Ext.JSON.decode(column);
                                                         var store = Ext.create('Ext.data.Store', {
                                                                     fields:fields,
                                                                     pageSize:10,
                                                                     width:'100%',
                                                                     sorters: [
                                                                         {
                                                                             property : 'id',
                                                                             direction: 'DESC'
                                                                         }
                                                                     ],
                                                                     remoteSort:true,
                                                                     proxy: {
                                                                         type: 'ajax',
                                                                         url : path + '/user_report/userReport!getUserReportByDay.action',
                                                                         extraParams:{beginDate:Ext.getCmp('beginDate').getValue(), endDate:Ext.getCmp('endDate').getValue()},
                                                                         reader: {
                                                                             type: 'json',
                                                                             root:'resultObject',
                                                                             totalProperty: 'resultObject.totalCount'
                                                                         }
                                                                     },
                                                                     autoLoad: true
                                                                 });

                                                         store.load({
                                                                     scope:this,
                                                                     callback: function(records, operation, success) {
                                                                         var num = 0;
                                                                         for (var i = 0; i < records.length; i++) {
                                                                             num += records[i].get('num');
                                                                         }
                                                                         Ext.getCmp('numTotal').setValue(num);
                                                                         chartStore.loadData(store.getRange(0, store.getCount() - 1));
                                                                     }
                                                                 })

                                                         grid.reconfigure(store, columns.columModle);
                                                         grid.update();
                                                     }
                                                 })
                                     }
                                 }else{
								  Ext.Ajax.request({
							   url:path+'/user_report/userReport!getUserReportByYear.action?beginDate='+Ext.getCmp('beginDate').getValue()+"&endDate="+Ext.getCmp('endDate').getValue(),
							   success:function(response,selfobj){
							     var a = response.responseText;
								 var json = new Ext.JSON.decode(a);
								 var fields = ['index','num'];
								 var column ='{"columModle":[{"text":i18n._("year"),"dataIndex":"index",xtype:"datecolumn","format":"Y","flex":1},'+
                                             '{"text":i18n._("user"),"dataIndex":"num","flex":1}]}';
								 var columns = new Ext.JSON.decode(column);
								var store = Ext.create('Ext.data.Store', {
                                               fields:fields,
                                               pageSize:10,
	                                           width:'100%',
                                               sorters: [ {
                                                            property : 'id',
                                                            direction: 'DESC'
                                                          }
                                                        ],
	                                           remoteSort:true,
	                                           proxy: {
                                                       type: 'ajax',
                                                       url : path+'/user_report/userReport!getUserReportByYear.action',
                                                       extraParams:{beginDate:Ext.getCmp('beginDate').getValue(), endDate:Ext.getCmp('endDate').getValue()},
	                                                   reader: {
                                                                  type: 'json',
		                                                          root:'resultObject',
		                                                          totalProperty: 'resultObject.totalCount'
                                                               }
                                                       },
	                                           autoLoad: true
                                 });     

								 store.load({
                                                 scope:this,
                                                 callback: function(records, operation, success) {
                                                 var num=0;
	                                              for(var i = 0 ;i<records.length;i++){
	                                                    num+=records[i].get('num');
	                                                 }
	                                                   Ext.getCmp('numTotal').setValue(num);
													   chartStore.loadData(store.getRange(0,store.getCount()-1));
                                                  }
                                                })
												
                                grid.reconfigure(store, columns.columModle);
								grid.update();
							   }
							 })
								}
							 }
				}

				]
			 },{
			    anchor:'100% 85%',
				xtype:'fieldset',
				style:{
				  marginLeft:'5px',
				  marginRight:'5px',
				  marginBottom:'5px'
				},
				id:'info',
				title:i18n._('infomation'),
				layout:{
				  type:'hbox',
				  padding:'5',
				  align:'stretch'
				},
				items:[grid,querychart]
			 }
		  ]
		 }]
	});

            }
        };
    })();

    MultiLang.init();
    
});

function getCookie(name){
         var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
         if(arr != null) return unescape(arr[2]);
		 return null;
 }

</script>
 </head>

 <body>
  
 </body>
</html>
